<template>
  <h1>个人简历练习</h1>
  <table border="1">
  <tr>
    <td>照片：</td>
    <td><img :src="person.imgURL" width="100"></td>
  </tr>
  <tr>
    <td>姓名：</td>
    <td>{{person.name}}</td>
  </tr>
  <tr>
    <td>年龄：</td>
    <td>{{person.age}}</td>
  </tr>
  <tr>
    <td>好友：</td>
    <td><ul>
      <li v-for="f in person.friends">{{f}}</li>
    </ul></td>
  </tr>
  </table>
  <button @click="loadData">加载数据</button>
</template>

<script setup>
import {ref} from "vue";
//要求：补全HTML表格中邦德代码，点击按钮式，页面能显示出对应的效果
//定义对象用来与表格现实数据进行绑定
const person =ref({name:"", age:"", imgURL: "", friends:[]})
//2.定义加载数据的方法
const loadData = () => {
  person.value = {
    name:"范传奇",
    age:18,
    imgURL:"imgs/fcq.jpg",
    friends:['张三','李四','王五']
  }
}
</script>

<style scoped>

</style>